﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab选项卡</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
.tab{width:234px;height:404px;border:1px solid #e71919;padding:0;}
.tab ul.menu{height:34px;background:#f07272;position:relative;margin:0;padding:0;}
.tab ul.menu li{float:left;text-align:center;width:78px;height:34px;background:#f6f6f6;line-height:32px;list-style:none;font-size:12px;cursor:pointer;}
.tab ul.menu li.active{background:#e71919;color:#fff;}
.con1,.con2,.con3{height:190px;border-top:0px;}
.con2,.con3{display:none;}
.con1 ul,.con2 ul,.con3 ul{padding:5px;}
.con1 ul li,.con2 ul li,.con3 ul li{padding:0 0 0 10px;font-size:14px;line-height:180%;color:#252525;}
.con1 ul li:hover,.con2 ul li:hover,.con3 ul li:hover{color:#ba2636;cursor:pointer;text-decoration:underline;}
.line{height:2px;width:120px;background:red;position:absolute;bottom:-2px;}
</style>

</head>

<body>

<script type="text/javascript">
$(function () {
   $('.tab ul.menu li').hover(function(){
        //获得当前被点击的元素索引值
         var Index = $(this).index();
    	 var line=120*Index-120; 
    	//给菜单添加选择样式
        $(this).addClass('active').siblings().removeClass('active');
    	 $(".line").stop(true,true).animate({left:line},200);
		
    	//显示对应的div
    	$('.tab').children('div').eq(Index).show().siblings('div').hide();
   
   });
});

</script> 
<div class="tab">
	<ul class="menu">
		<li class="active">新闻</li>
		<li>娱乐</li>
		<li>图片</li>
	</ul>
	<div class="con1">
		<table style="margin:1px;">
            <tr style="border:1px dashed #e71919">
                <td  style="width:220px;height:185px;background-image:url(广告.png);">
                </td>
            </tr>
            <tr style="border:1px dashed #e71919">
                <td style="height:55px;border-top:1px dashed #e71919">
                   1
                </td>     
            </tr>
            <tr>
                 <td style="height:55px;border-top:1px dashed #e71919">
                   2
                </td>
            </tr>
            <tr>
                <td style="height:55px;border-top:1px dashed #e71919">
                  3
                </td>
            </tr>
        </table>
	</div>
	<div class="con2">
	    <table style="margin:1px;">
            <tr style="border:1px dashed #e71919">
                <td  style="width:220px;height:185px;background-image:url(广告.png);">
                </td>
            </tr>
            <tr style="border:1px dashed #e71919">
                <td style="height:55px;border-top:1px dashed #e71919">
                   4
                </td>     
            </tr>
            <tr>
                 <td style="height:55px;border-top:1px dashed #e71919">
                   5
                </td>
            </tr>
            <tr>
                <td style="height:55px;border-top:1px dashed #e71919">
                  6
                </td>
            </tr>
        </table>
	</div>
	<div class="con3">
	    <table style="margin:1px;">
            <tr style="border:1px dashed #e71919">
                <td  style="width:220px;height:185px;background-image:url(广告.png);">
                </td>
            </tr>
            <tr style="border:1px dashed #e71919">
                <td style="height:55px;border-top:1px dashed #e71919">
                   7
                </td>     
            </tr>
            <tr>
                 <td style="height:55px;border-top:1px dashed #e71919">
                   8
                </td>
            </tr>
            <tr>
                <td style="height:55px;border-top:1px dashed #e71919">
                  9
                </td>
            </tr>
        </table>
	</div>
</div>



</body>
</html>
